<template>
	<view style="position: relative;">
		<view class="padding">
			<view class="row" v-for="item in 10">
				<view class="avater"></view>
				<view class="col" style="margin-left: 10rpx;">
					<view class="name">用户AAAA</view>
					<view class="content">内容rrrr内容rrrr内容rrrr内容rrrr内容rrrr内容rrrr内容rrrr内容rrrr</view>
					<view class="row-between-center">
						<view class="time">2023-09-01 14:50</view>
						<view class="row-h-center">
							<image src="/static/images/zan.png" class="zan"></image>
							<view class="zannum">111</view>
						</view>
					</view>
					<view class="bg">
						<view class="to">
							用户B:AAAAAAAAAA
						</view>
						<view class="to">
							用户B:AAAAAAAAAA
						</view>
						<view class="more">
							展开10条回复>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 120rpx;">
			
		</view>
		<view class="bottom row-h-center">
			<u-input style="margin-left: 40rpx;"   v-model="sendMsg" shape="circle" placeholder="请输入内容" > </u-input>
			<image src="/static/images/tupian2.png" class="img"></image>
			<view class="send" @click="addCommpent()">
				发送
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		addCommpent,getCommpent
	} from '@/api/change/index.js'
	export default {
		data() {
			return {
				sendMsg:'',
				pid:'',
				workItemId:''
			}
		},
		onLoad(option) {
			this.workItemId = option.workItemId
			this.getCommpent()
		},
		
		methods: {
			addCommpent() {
				if (!this.sendMsg) {
					uni.showToast({
						title: '请输入内容',
						icon: 'none'
					})
					return
				}
				addCommpent({
					content: this.sendMsg,
					pid: uni.getStorageSync('uid'),
					workItemId: this.workItemId
				}).then(res => {
			
				})
			},
			getCommpent() {
				getCommpent(this.workItemId).then(res => {
					
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.img{
		margin-left: 20rpx;
		width: 50rpx;
		height: 50rpx;
	}
	.send{
			margin-right: 20rpx;
			margin-left: 20rpx;
		border-radius: 20rpx;
		padding: 5rpx 10rpx;
		color: white;
		font-size: 30rpx;
		background-color: #bd3124;
	}
	.bottom{
		height: 100rpx;
		background-color: white;
		width: 100%;
		position: fixed;
		bottom: 0;
	}
	.input1{
		
	}
	.padding{
		padding: 20rpx;
	}
	.avater{
		flex-shrink: 0;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: red;
	}
	.bg{
		padding: 20rpx;
		background-color: #e9f2f7;
		border-radius: 10rpx;
	}
	.name{
		color: black;
		font-weight: bolder;
		font-size: 32rpx;
	}
	.content{
		font-size: 38rpx;
		color: #4f4f4f;
	}
	.time{
		font-size: 28rpx;
		color: #101010;
	}
	.to{
		font-size: 28rpx;
		color: #4f4f4f;
	}
	.zannum{
		font-size: 30rpx;
		color: #101010;
	}
	.more{
		font-size: 28rpx;
		color: #347caf;
	}
	.zan{
		width: 48rpx;
		height: 48rpx;
	}
	.bottom{
		
	}
</style>
